<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<text class="text"></text>
			<view class="item" @click="sharefix">
				<text class="li">分享</text>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="{use:false}" :bottom="(750/dw)*botOperateBut+152">
		<view class="content">
			<view class="group-box">
				<view class="title">6地锌锭库存7.37万吨，较本周一增加0.09万吨</view>
				<view class="date">
					<text>来源:同花顺期货通</text>
					<text>2023-11-09  14:04</text>
				</view>
				<view class="data">据Mysteel调研统计，11月9日统计的6地锌锭库存7.37万吨，较本周一增加0.09万吨，较上周四增加0.16万吨。上海市场锌锭库存3.33万吨，较本周一增加0.05万吨，较上周四增加0.28万吨。广东市场锌锭库存0.83万吨，较本周一减少0.07吨，与上周四持平。天津市场锌锭库存2.18万吨，较本周一增加0.04万吨，较上周四减少0.12万吨。</view>
				<view class="tag-box">
					<text class="yellow-bg">沪锡</text>
					<text class="blue-bg">原油</text>
				</view>
				<view class="share-icon">
					<image src="@/static/home/subpage/weChat.png"></image>
					<image src="@/static/home/subpage/friends.png"></image>
					<image src="@/static/home/subpage/microblog.png"></image>
					<image src="@/static/home/subpage/qq.png"></image>
				</view>
				<view class="msg">
					<view class="left">
						<image src="@/static/home/subpage/icn_msg.png"></image>
						<text>上新!半年度策略报告来了 点击查看</text>
					</view>
					<image src="@/static/home/subpage/icn_right.png"></image>
				</view>
				<view class="sub">本文发布此内容旨在传递更多信息，不代表同花顺期货通官方观点，不构成任何投资建议，据此交易，风险自担。</view>
			</view>
			<view class="group-box">
				<view class="hot-title">
					<view class="hot-title-left">
						<view class="title-text">相关阅读</view>
						<span class="active-dimension"></span>
					</view>
				</view>
				<view class="row" v-for="(item,index) in 2" @click="hotDetail">
					<view class="left">
						<view class="sup">[活跃度] 11月3日商品期货活跃度</view>
						<view class="sup">排行榜: 原油、燃油、沪锡位列前三</view>
						<view class="date">
							<text>2023-11-3 11:25:25</text>
						</view>
					</view>
					<image class="cover" src="@/static/logo.png"></image>
				</view>
			</view>
			<view class="group-box">
				<view class="comment">
					<view class="caption">全部评论 (0)</view>
					<view v-if="true" class="itemlist" @click="moreindex=-1">
						<view class="list" v-for="(item,index) in 2">
							<view class="avatar">
								<view class="left">
									<image src="@/static/home/subpage/vipcard_img_head_default@2x.png"></image>
									<view class="name">
										<view class="sup">用户名</view>
										<view class="pdate">一天前发布</view>
									</view>
								</view>
								<view class="more">
									<image src="@/static/home/subpage/more.png" @click.stop="clickmore(index)"></image>
									<view class="more-modal" :hidden="moreindex!=index">
										<view class="li">举报</view>
										<view class="li">屏蔽</view>
									</view>
								</view>
							</view>
							<view class="remark">
								<text>这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，</text>
								<text class="fulltext">[全文]</text>
							</view>
							<view class="pinglun">
								<view class="xiaoxi">
									<image src="@/static/home/subpage/xiaoxi_1.png"></image>
									<text>202</text>
								</view>
								<view class="right">
									<view class="xiaoxi">
										<image src="@/static/home/subpage/praise_1.png"></image>
										<text>202</text>
									</view>
									<view class="xiaoxi">
										<image src="@/static/home/subpage/collect_1.png"></image>
										<text>202</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="nodata">
						<image src="@/static/home/subpage/nodata.png"></image>
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
	<view class="bottom-fix" :style="{'padding-bottom':botOperateBut}">
		<view class="bottom-fix-box">
			<input type="text" class="ipt" placeholder-class="pipt" placeholder="我来说两句">
			<view class="icon-box">
				<image src="@/static/home/subpage/xiaoxi.png"></image>
				<image src="@/static/home/subpage/praise.png"></image>
				<image src="@/static/home/subpage/collect.png"></image>
				<image src="@/static/home/subpage/transmit.png"></image>
			</view>
		</view>
	</view>
	<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>
</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			dw:uni.getSystemInfoSync().windowWidth,
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			botOperateBut: this.botOperateBut,
			animationData: {},
			animation:{},
			isshare: false,
			moreindex:-1
		};
	},
	onReady(){
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation =animation;
	},
	methods:{
		back(){
			uni.navigateBack();
		},
		clickmore(index){
			this.moreindex =index;
		},
		/*下拉刷新的回调 */
		downCallback() {
			this.mescroll.resetUpScroll();
			setTimeout(()=>{
				this.mescroll.endSuccess(9,false);// 加载成功
			},1500)
		},
		sharefix(){
			this.isshare= true;
			this.animation.translateY(0).step();
			this.animationData = this.animation.export();
		},
		closesharefix(){
			this.isshare= false;
			this.animation.translateY("100%").step();
			this.animationData = this.animation.export();
		},
	}
}
</script>

<style lang="scss">
page{
	background: #F7F7F7;
}
.content{
	.group-box{
		padding:0 32rpx;
		background-color: #fff;
		margin-top:16rpx;
		.title{
			padding-top:48rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
		}
		>.date{
			font-size: 24rpx;
			color: rgba(0,0,0,0.6);
			margin-top:24rpx;
			& text:last-child{
				padding-left:32rpx;
			}
		}
		.data{
			margin-top:48rpx;
			font-size: 28rpx;
			color: rgba(0,0,0,0.8);
			line-height: 56rpx;
		}
		.tag-box{
			font-size: 24rpx;
			display: flex;
			align-items: center;
			margin-top:26rpx;
			.yellow-bg{
				font-size: 20rpx;
				color: #FF9500;
				height: 32rpx;
				line-height: 32rpx;
				background: rgba(255,149,0,0.08);
				border-radius: 4rpx;
				padding:0 14rpx;
				// margin-left:16rpx;
			}
			.blue-bg{
				font-size: 20rpx;
				color: #356FE5;
				height: 32rpx;
				line-height: 32rpx;
				background: rgba(53,111,229,0.04);
				border-radius: 4rpx;
				padding:0 14rpx;
				margin-left:16rpx;
			}
		}
		.share-icon{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 16rpx;
			margin-top:32rpx;
			& image{
				width: 100rpx;height:100rpx;
				display: block;
			}
		}
		.msg{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top:32rpx;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding:16rpx;
			box-sizing: border-box;
			& image{
				width: 48rpx;height:48rpx;
			}
			& text{
				font-size: 28rpx;
				color: rgba(0,0,0,0.8);
			}
			.left{
				display: flex;
				align-items: center;
				& image{
					margin-right:8rpx;
				}
			}
		}
		.sub{
			margin-top:24rpx;
			padding-bottom:36rpx;
			font-size: 20rpx;
			color: rgba(0,0,0,0.6);
			line-height: 36rpx;
		}
		.hot-title{
			padding-top:32rpx;
			.title-text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}
		}
		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding:24rpx 0;
			border-bottom:2rpx solid #F6F7F9;
			.left{
				width: 436rpx;
				.sup{
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
				}
				.date{
					margin-top:24rpx;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
				}
			}
			.cover{
				width: 174rpx;
				height: 134rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
			}
		}
		.row:last-child{
			border-bottom:0;
		}
		.comment{
			.caption{
				font-size: 28rpx;
				color: #000000;
				height: 88rpx;
				line-height: 88rpx;
				border-bottom:2rpx solid #F6F7F9;
			}
			.itemlist{
				padding-bottom:78rpx;
				.list{
					border-bottom:2rpx solid #F6F7F9;
					padding:32rpx 0 24rpx;
					.avatar{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							& image{
								width: 82rpx;
								height: 82rpx;
								margin-right:14rpx;
							}
							.name{
								.sup{
									font-size: 32rpx;
									font-weight: bold;
									color: #333333;
									line-height: 48rpx;
								}
								.pdate{
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(0,0,0,0.4);
									line-height: 28rpx;
								}
							}
						}
						.more{
							position: relative;
							width: 40rpx;
							height: 8rpx;
							& image{
								width: 40rpx;
								height: 8rpx;
								display: block;
							}
							.more-modal{
								position: absolute;
								top:24rpx;right:0;
								width: 182rpx;
								background: #FFFFFF;
								box-shadow: 0px 8rpx 16rpx 2rpx rgba(0,0,0,0.08);
								border-radius: 16rpx;
								border: 2rpx solid #F4F5F7;
								z-index: 1;
								.li{
									height:88rpx;
									font-size: 28rpx;
									font-weight: 500;
									color: rgba(0,0,0,0.8);
									line-height: 88rpx;
									text-align: center;
									border-bottom: 2rpx solid #F6F7F9;
								}
								.li:last-child{
									border-bottom:0;
								}
							}
						}
					}
					.remark{
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(0,0,0,0.8);
						line-height: 48rpx;
						margin-top:26rpx;
						padding-left:94rpx;
						.fulltext{
							color: #EE5953;
						}
					}
					.pinglun{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top:28rpx;
						padding:0 2rpx;
						.xiaoxi{
							display: flex;
							align-items: center;
							& image{
								width:32rpx;height:32rpx;
								margin-right:4rpx;
							}
							& text{
								font-size: 28rpx;
								font-weight: 500;
								color: rgba(0,0,0,0.4);
							}
						}
						.right{
							display: flex;
							align-items: center;
							.xiaoxi:last-child{
								margin-left:70rpx;
							}
						}
					}
				}
			}
			.nodata{
				padding:124rpx 0 234rpx;
				& image{
					width:294rpx;height:326rpx;
					display: block;
					margin:0 auto;
				}
			}
		}
	}
	.group-box:first-child{
		margin-top:0;
	}
}
.active-dimension {
	display: inline-block;
	width: 60rpx;
	height: 10rpx;
	background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin-top: 16rpx;
}
.bottom-fix{
	background: #FFFFFF;
	box-shadow: 0px 0 16rpx 2rpx rgba(51,51,51,0.2);
	position: fixed;
	left:0;bottom:0;
	width: 100%;
	z-index: 9;
	.bottom-fix-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:32rpx;
		.ipt{
			width: 356rpx;
			height: 88rpx;
			background: #F4F5F7;
			border-radius: 44rpx;
			color: rgba(0,0,0,0.8);
			margin-right:24rpx;
			padding-left:32rpx;
			box-sizing: border-box;
		}
		.pipt{
			color: rgba(0,0,0,0.4);
		}
		.icon-box{
			flex:1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			& image{
				width:48rpx;height:48rpx;
			}
		}
	}
}

</style>
